<template>
  <div>
    <h2>名字:{{ $store.state.userInfo.name }}</h2>
    <h2>技能:{{ $store.state.userInfo.skill }}</h2>
    <h2>好朋友:{{ $store.state.userInfo.friend }}</h2>
    <!-- 用法和计算属性类似 直接点语法获取即可 -->
    <h2>是否成年:{{ $store.getters.isOld }}</h2>
    <input type="button" value="改名字" @click="editName" />
    <br />
    <input type="button" value="通过mutation修改名字" @click="setName" />
    <br />
    <input type="button" value="通过mutation修改技能" @click="setSkill" />
    <input type="button" value="通过mutation修改用户信息" @click="setInfo" />
  </div>
</template>

<script>
export default {
  methods: {
    editName () {
      this.$store.state.userInfo.name = '宝剑'
    },
    setName () {
      // 通过仓库的commit方法来修改
      this.$store.commit('setName')
    },
    setSkill () {
      // 传递的参数从第二个开始
      this.$store.commit('setSkill', '唱，跳，rap')
    },
    setInfo () {
      // this.$store.commit('setUserInfo', '某群', '嘿嘿', '坤坤')
      // 直接传递一个对象
      this.$store.commit('setUserInfo', {
        name: '食戬之灵',
        skill: '食物越好吃，越凉快',
        friend: '中华小当家'
      })
    }
  }
}
</script>

<style></style>
